<script setup>
import { computed, ref, watch } from 'vue';
import { useBoolean } from '@sa/hooks';
import { $t } from '@/locales';
import { fetchGetWarehourse } from '@/service/api';
import BindStoreModal from './bind-store-modal.vue';

defineOptions({ name: 'StoreEditModal' });
const { bool: bindStoreVisible, setTrue: openBindStoreModal } = useBoolean();
const props = defineProps(['rowData']);
const visible = defineModel('visible', { default: false });
const agreementOptions = [{ label: 'HTTPS', value: 0 },{ label: 'Socks', value: 1 }]
const warehouseOptions = ref([])
const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

const model = ref(createDefaultModel());
function createDefaultModel() {
  return {
    account: '',
    pwd: '',
    agreement:undefined,
    ipAddress: '',
    proxyPort: '',
    proxyAccount: '',
    proxyPwd: '',
    cookie: '',
    address: {
      name: '',
      phone: '',
      full_address: '',
    }
  };
}

function handleInitModel(){
  model.value = createDefaultModel()

  if(props.rowData){
    Object.assign(model.value, props.rowData, {
      AdsAuthStateText: props.rowData.AdsAuthState ? $t('common.authStatus.isNo') : $t('common.authStatus.isOk'),
      AuthStateText: props.rowData.AuthState ? $t('common.authStatus.isNo') : $t('common.authStatus.isOk'),
    })
  }
}

async function getWarehourseOptions() {
  const { error, data }  = await fetchGetWarehourse();
  if (!error) {
    warehouseOptions.value = data.Data
    if(props.rowData){
      const warehouse = data.Data.find(item => item.Id === props.rowData.StorageId)
      if(warehouse?.AddAddressJson){
        model.value.address = JSON.parse(warehouse.AddAddressJson)
      }
    }
  }
}

function showBindStore(){
  openBindStoreModal()
}

watch(visible, () => {
  if (visible.value) {
    handleInitModel()
    getWarehourseOptions()
  }
})
</script>

<template>
  <ElDialog v-model="visible" :title="$t('page.store.editStore')" class="dialog-bg w-920px">
    <div class="bg-white p-20px flex">
      <el-avatar :size="100" :src="circleUrl" />
      <div class="flex-1">
        <el-descriptions :column="2">
          <el-descriptions-item label="店铺名称：" label-align="right" label-class-name="cell-item">{{ model.Name }}</el-descriptions-item>
          <el-descriptions-item label="基础授权：" label-align="right" label-class-name="cell-item">
            <el-tag :type="model.AdsAuthState?'danger':'success'">{{ model.AdsAuthStateText }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="店铺ID：" label-align="right" label-class-name="cell-item">{{ model.ShopId }}</el-descriptions-item>
          <el-descriptions-item label="广告授权：" label-align="right" label-class-name="cell-item">
            <el-tag type="danger">授权失败</el-tag>
            <el-text class="ml-16px" type="primary">授权</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="店铺标签：" label-align="right" label-class-name="cell-item">
            <span>alice的店</span>
            <el-text class="ml-16px" type="primary">修改</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="高阶授权：" label-align="right" label-class-name="cell-item">
            <el-tag v-if="model.AuthState" type="danger">{{ model.AuthStateText }}</el-tag>
            <el-text v-else type="success">{{ model.AuthStateText }}</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="绑定仓库：" label-align="right" label-class-name="cell-item">
            <span>{{ model.StorageName }}</span>
            <el-text class="ml-16px" type="primary" @click="showBindStore">修改</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="物流设置：" label-align="right" label-class-name="cell-item">
            <el-tag type="danger">物流渠道设置错误</el-tag>
            <el-text class="ml-16px" type="primary" @click="showBindStore">修复</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="仓库设置：" label-align="right" label-class-name="cell-item">
            <el-tag type="danger">异常</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="店铺实名：" label-align="right" label-class-name="cell-item">
            <el-tag type="success">已认证</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="仓库地址：" label-align="right" label-class-name="cell-item">
            <div class="flex ml-80px">
              <span>Name：</span>
              <span>{{ model.address.name }}</span>

              <span class="ml-16px">Phone：</span>
              <span>{{ model.address.phone }}</span>
            </div>
            <div class="flex ml-80px">
              <span>Address：</span>
              <span>{{ model.address.full_address }}</span>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <div class="bg-white p-20px mt-30px">
      <div class="flex mb-20px">
        <el-button type="primary" round plain>高阶授权</el-button>
        <el-text class="ml-20px">敬请期待</el-text>
      </div>
      <ElForm :model="model" label-placement="left" label-width="145px">
        <ElFormItem :label="$t('page.store.account')" prop="name">
          <ElInput v-model="model.account" :placeholder="$t('page.store.form.account')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.pwd')" prop="pwd">
          <ElInput v-model="model.pwd" :placeholder="$t('page.store.form.pwd')" type="password" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.agreement')" prop="agreement">
          <ElSelect v-model="model.agreement" clearable :placeholder="$t('page.store.form.agreement')">
            <ElOption
              v-for="{ label, value } in agreementOptions"
              :key="value"
              :label="label"
              :value="value"
            ></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem :label="$t('page.store.ipAddress')" prop="ipAddress">
          <ElInput v-model="model.ipAddress" :placeholder="$t('page.store.form.ipAddress')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.proxyPort')" prop="proxyPort">
          <ElInput v-model="model.proxyPort" :placeholder="$t('page.store.form.proxyPort')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.proxyAccount')" prop="proxyAccount">
          <ElInput v-model="model.proxyAccount" :placeholder="$t('page.store.form.proxyAccount')" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.proxyPwd')" prop="proxyPwd">
          <ElInput v-model="model.proxyPwd" :placeholder="$t('page.store.form.proxyPwd')" type="password" />
        </ElFormItem>
        <ElFormItem :label="$t('page.store.cookie')" prop="cookie">
          <ElInput v-model="model.cookie" :placeholder="$t('page.store.form.cookie')" type="textarea" :row="3" />
        </ElFormItem>
        <ElFormItem>
          <el-space :size="16">
            <el-button type="primary">{{$t('common.save')}}</el-button>
            <el-button>{{$t('common.reset')}}</el-button>
          </el-space>
        </ElFormItem>
      </ElForm>
    </div>

    <BindStoreModal
      v-model:visible="bindStoreVisible"
      v-model:row-data ="model"
      :warehouse-data="warehouseOptions"
    />
  </ElDialog>
</template>

<style lang="scss" scoped>
:deep(.cell-item) {
  display: inline-block;
  width: 120px;
  text-align: right;
}
</style>